<html> 
 
<head> 
<title>019 | Terrain shader | J3D</title>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> 

<link rel="stylesheet" href="common/common.css"/>
<script type="text/javascript" src="common/common.js"></script>

<script type="text/javascript" src="../build/j3d.js"></script>
<script type="text/javascript" src="js/dat.gui.min.js"></script>

<script>
	var mx = 0, my = 0;

    var camroot, terrain, ground, water;
    var terShader;
	
	function init() {
		if(!checkWebGL()) return;

        properties = {
            beachLimit: 0.035,
            beachSmoothness: 0.01,
            rockLimit: 0.7,
            rockSmoothness: 0.15
        }

		//DAT.GUI.autoPlace = false;

		gui = new dat.GUI({ autoPlace: false });


		gui.add(properties, 'beachLimit').min( 0.0 ).max( 1.0 );
        gui.add(properties, 'beachSmoothness').min( 0.0 ).max( 0.1 );
        gui.add(properties, 'rockLimit').min( 0.3 ).max( 1.0 );
        gui.add(properties, 'rockSmoothness').min( 0.0 ).max( 0.3 );


        gui.domElement.style.position = 'fixed';
		gui.domElement.style.right = '140px';
		gui.domElement.style.zIndex = 200;
        document.body.appendChild( gui.domElement );

		engine = new J3D.Engine();

        J3D.Loader.loadGLSL("../demo/shaders/Terrain.glsl", function(s) {
			terShader = s;

			terShader.beachTex = new J3D.Texture("../demo/models/textures/terrain/sand.jpg");
			terShader.grassTex = new J3D.Texture("../demo/models/textures/terrain/grass.jpg");
            terShader.rockTex =  new J3D.Texture("../demo/models/textures/terrain/rock.jpg");

            terShader.textureTile = new v2(6,6);

			setup();
		});
    }

    function setup() {
		
		J3D.Loader.loadJSON("models/019/terrain.json", function(jsmeshes) {
			J3D.Loader.loadJSON("models/019/terrainScene.json", function(jsscene) {
				jsonScene = jsscene;
                jsscene.path = "models/019/";
				J3D.Loader.parseJSONScene(jsscene, jsmeshes, engine);

                camroot = engine.scene.find("camroot");
                terrain = engine.scene.find("terrain");

                water = engine.scene.find("terrain/water");
//                water.enabled = false;

                ground = engine.scene.find("terrain/ground");
                ground.geometry.calculateBoundingBox();
                var b = ground.geometry.boundingBox;
                terShader.heightLimits = [ b.minY, b.maxX ];
                ground.renderer = terShader;


				draw();
			})
		});

		document.onmousemove = onMouseMove;
	}
	
	function onMouseMove(e) {
		mx = e.clientX;
		my = e.clientY;
	}
	
	function draw() {
        terShader.beachLimit = properties.beachLimit;
        terShader.beachSmoothness = properties.beachSmoothness;

        terShader.rockLimit = properties.rockLimit;
        terShader.rockSmoothness = properties.rockSmoothness;

        terrain.rotation.y += J3D.Time.deltaTime * 0.0002;
        camroot.rotation.x = (my / window.innerHeight * 2 - 1) * 0.5;

        engine.render();
        requestAnimationFrame(draw);
	}
		
</script>

</head> 

<body onload="init();">
	<script>
		setLabels("019. A terrain shader", "A simple terrain with a dynamic<br>texture based on height/steepness");
	</script>
	
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-24294554-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</body> 

</html> 